<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex justify-between pl-26px pt-26px pr-26px">
            <div class="flex items-center product-data">
                推广中的产品总数： <b class="text-green">{{ state.promotionProducts }}</b>推广中的关键词总数：<b class="text-orange">{{ state.promotionWords }}</b>
            </div>
            <div class="flex">
                <el-input v-model="state.keyword" placeholder="请输入产品名称/主关键词/型号/产品ID" class="w-300px"></el-input><el-button type="primary" :icon="Search" class="ml-10px" v-debounce="{ callback: handleSearch, delay: 300 }">查询</el-button>
            </div>
        </div>
        <div class="pt-26px pl-26px pr-26px table-container">
            <el-table v-loading="state.loading" :data="state.products"
                :row-key="row => row.ID" :reserve-selection="true" @selection-change="handleSelectionChange"
                class="w-full">
                <el-table-column type="selection" label="" align="center" width="60" />
                <el-table-column label="产品图片" align="center" width="120">
                    <template #default="scope">
                        <a :href="'#/b2b/product/detail/' + scope.row.ID"><img :src="scope.row.InforPicTure" :alt="scope.row.InforTitle" class="w-80px h-80px"></a>
                    </template>
                </el-table-column>
                <el-table-column prop="InforTitle" label="产品名称" align="center">
                    <template #default="scope">
                        <el-link :href="'#/b2b/product/detail/' + scope.row.ID">{{ scope.row.InforTitle }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="Keyword" label="主关键词" align="center" width="220" />
                <el-table-column prop="time" label="添加时间" align="center" width="140">
                    <template #default="scope">
                        {{ formatDate(scope.row.CreateDate) }}
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="上架时间" align="center" width="140">
                    <template #default="scope">
                        {{ formatDate(scope.row.UpperShelfDate) }}
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="推广时间" align="center" width="140">
                    <template #default="scope">
                        {{ formatDate(scope.row.PromotionDate) }}
                    </template>
                </el-table-column>
                <el-table-column label="到期时间" align="center" width="140">
                    {{ formatDate(state.expirationDate) }}
                </el-table-column>
                <el-table-column label="操作" align="center" width="140">
                    <template #default="scope">
                        <el-button :icon="SoldOut" type="primary" text class="!ml-0" @click="handleDown(scope.row.ID)">下架</el-button>  
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pt-26px pl-26px pr-26px pb-26px page-container flex justify-between items-center">
            <div class="flex items-center text-12px">
                已选 {{ state.selectionData.length }} 条数据 <el-button type="primary" text size="small"
                    class="ml-12px" @click="handleBatchDown">批量下架</el-button>
            </div>
            <Pagination v-if="state.products.length > 0" v-model:total="state.products.length" v-model:page="state.page.curPage"
                v-model:limit="state.page.pageSize" @pagination="handleQuery" />
        </div>
        <!-- <template v-if="state.products.length"></template>
        <template v-else>
            <el-empty description="暂无推广中产品" />
        </template> -->
    </div>
</template>

<script setup lang="ts">
import { Search,SoldOut,WarningFilled,SuccessFilled } from '@element-plus/icons-vue'
import Pagination from '@/components/Pagination/index.vue'
import { dateFormat } from '@/utils/date'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { getPromotionProductApi,downProductApi,batchDownProductApi } from '@/api/b2b'

const state = reactive({
    keyword:'',
    products:[],
    selectionData: [],
    promotionProducts:0,//推广中的产品总数
    promotionWords:0,//推广中的关键词总数
    expirationDate:'',//到期时间
    page:{
        total:0,
        curPage:1,
        limit:10,
        pageSize:10,
    },
    loading:true
})

const formatDate = computed(() => {
    return function(data:string){
        if(data === ''){
            return '-'
        }
        return dateFormat(data,'YYYY-MM-DD')
    }
})


function handleSelectionChange(rows: any) {
    state.selectionData = rows.map((item: any) => item.ID)
}

async function handleSearch() {
    await getPromotionProduct()
}

function handleQuery() {
    state.loading = true
    getPromotionProduct()
}
async function getPromotionProduct(){
    const res: ResType = await getPromotionProductApi({
        tk: state.keyword,
        pn: state.page.curPage,
        pagesize: state.page.pageSize
    })
    if(res.code === 200){
        state.loading = false
        state.products = res.data
        state.expirationDate = res.serviceendtime
        state.promotionProducts = res.tgprocount
        state.promotionWords = res.kwcount
    }  
}

function handleDown(id:string){
    confirmMessageBox(WarningFilled, '下架产品影响推广效果，是否确定下架？', '','',async () => {
        const res: ResType = await downProductApi({
            id:id
        })
        if(res.code === 200){
            confirmMessageBox(SuccessFilled,res.message,'','',async() =>{
                await getPromotionProduct()
            })
        }
    })
}

async function handleBatchDown(){
    if (!state.selectionData.length) {
        confirmMessageBox(WarningFilled,'请选择多个要批量下架的产品？')
    }else{
        const res = await batchDownProductApi({
            proids:state.selectionData
        })
        if(res.code === 200){
            confirmMessageBox(SuccessFilled,res.message, '','',async() => {
                state.selectionData = []
                await getPromotionProduct()
            })
        }else{
            ElMessage.error(res.message)
        }
    }
}

onMounted(() => {
    getPromotionProduct()
})  
</script>

<style lang="scss" scoped>
.product-data {
    font-size: 14px;
    color: var(--title-color);
    b{
        font-size: 22px;
        font-family: 'Din WEB';
        margin-right: 30px;
    }
}
</style>